/* 
 * 1. toolbar 생성.
 * 2. 툴바에 아이템으로 기본 요소인 button 생성.
 *          iconMask = 마스크 추가로 아이콘 보이도록 하기.
 * 3. 탭바에 items 추가.  
 * 4. 탭바 속성지정.
 */
Ext.setup({
	tabletStartupScreen:"./tabletStartupScreen.png",
	phoneStartupScreen:"./phoneStartupScreen.png",
	tabletIcon:"./tabletIcon.png",
	phoneIcon:"./phoneIcon.png",
	glossOnIcon: true,
	statusBarStyle:"black",
	fullscreen:true,
	preloadImages:[],
	scope:this,
	onReady: function() {
		var mainButton="";
		if (Ext.is.Phone) {
			mainButton = [
						  {
							  text: 'Mail', iconCls : 'action', leaf: true, iconMask:true,
							  handler: function(){
								  panel.layout.setActiveItem(mailPanel);
							  }
						  }, {
							  text: 'Board', iconCls: 'compose', leaf: true, iconMask:true,
							  handler: function(){
								  panel.layout.setActiveItem(boardPanel);
							  }
						  }, {
							  text: 'Search', iconCls: 'team', leaf: true, iconMask:true,
							  handler: function(){
								  panel.layout.setActiveItem(employee_list);
							  }
						  }, {
							  text: 'Login', iconCls: 'info', leaf: true, iconMask:true,
							  handler: function(){
								  window.location = "map://location"
							  }
						  }, {
							  text: 'Map', iconCls: 'maps', leaf: true, iconMask:true,
							  handler: function(){
								  window.location = "map://location"
							  }
						  },];
		} else {
			mainButton = [
						  {
							  text: 'E-Mail', iconCls : 'action',  iconMask:true,
							  items: [mailPanel],
							  handler: function(){
								  panel.layout.setActiveItem(mailPanel);
							  }
						  }, {
							  text: 'Board', iconCls: 'compose', leaf: true, iconMask:true,
							  items: [boardPanel],
							  handler: function(){
								  panel.layout.setActiveItem(boardPanel);
							  }
						  }, {
							  text: 'Employees', iconCls: 'team', leaf: true, iconMask:true,
							  items: [employee_list],
							  handler: function(){
								  panel.layout.setActiveItem(employee_list);
							  }
						  }, {
							  text: 'Login', iconCls: 'info', leaf: true, iconMask:true,
							  items: [login_panel],
							  handler: function(){
								  panel.layout.setActiveItem(login_panel);
							  }
						  }];
		}
		
		var tapHandler = function (btn, evt) {
			alert("Button '" + btn.text + "' tapped.");
		}
		
		var dockedItems = [{
        	xtype: 'toolbar',
            ui: 'light',
            items: mainButton,
            dock: 'bottom',
            layout: {
				pack: 'center'
			},
        }];
		
		panel = new Ext.TabPanel({
			fullscreen: true,  
			cardSwitchAnimation: {
		        type: 'slide',
		        cover: true
		    },
			//layout:'card',	
			title:"Tabpanel test",  
			//items: mainButton,
			dockedItems: dockedItems,
			defaults: {
				//handler: tapHandler,
		        scroll: 'vertical'
		    },
			tabBar: {
				dock: 'bottom',
				ui: 'light',
				scroll: {
					direction: 'horizontal',
					useIndicators: false
				},
				layout: {
					pack: 'center'
				}
			}
		})
		panel.show(); 
		panel.layout.setActiveItem(boardPanel);
	}
});
